<template>
  <div id='wrap'>
    <h1>使用axios进行请求</h1>
    <button @click="getRolesPageHandler">请求角色分页列表</button>
    <button @click="postRolesHandler">角色新增功能</button>
    <button @click="putRolesHandler">角色修改功能</button>
    <button @click="deleteRolesHandler">角色删除功能</button>
    <button @click="patchRolesHandler">角色禁用功能</button>
    <div v-if="roles.length>0">
      <div v-for="item in roles" :key="item.id" class="box">
        <span>角色ID:{{ item.id }}</span>
        <span>角色名称:{{ item.name }}</span>
        <span>角色编码:{{ item.code }}</span>
        <span>排序:{{ item.sort }}</span>
        <span>角色状态:{{ item.status }}-正常</span>
      </div>
    </div>
    <button @click="getRolesPageHandler1">请求角色分页列表</button>
    <button @click="postRolesHandler1">角色新增功能</button>
  </div>
</template>

<script lang='ts'>
export default {
  name: 'scu43',
}
</script>

<script lang='ts' setup>
import { ref,onMounted } from "vue";
import  axios  from "axios";
onMounted(()=>{
  getRolesPageHandler()
})
interface Role{
  id:number
  name:string
  code:string
  sort:number
  status:number
}
const roles=ref<Role[]>([])

const getRolesPageHandler=async()=>{
  axios({method:'GET',url:'http://localhost:8989/roles/page?pageNum=1&pageSize=100'})
  .then((res)=>{
    console.log(res.data.data.list);
    roles.value=res.data.data.list
  })
}

const postRolesHandler=async()=>{
  const newRole={
    name:'十谷风2',
    code:'116',
    sort:45,
    status:1,
    dataScope:1
  }
  axios({method:'POST',url:'http://localhost:8989/roles',data:JSON.stringify(newRole)}).then(
    (res)=>{
      console.log(res.data);
    }
  )
  getRolesPageHandler()
}

const putRolesHandler=async()=>{
  const raw=JSON.stringify({
    name:'终末地2',
    code:'002',
    sort:1,
    status:1,
    dataScope:1
  })
  axios({method:'PUT',url:'http://localhost:8989/roles/1032',data:raw}).then(
    (res)=>{
      console.log(res.data);
    }
  )
  getRolesPageHandler()
}

const deleteRolesHandler=async()=>{
  axios({method:'DELETE',url:'http://localhost:8989/roles/1032'}).then(
    (res)=>{
      console.log(res.data);
    }
  )
  getRolesPageHandler()
}

const patchRolesHandler=async()=>{
  axios({method:'PATCH',url:'http://localhost:8989/roles/1032/status?status=2'}).then(
    (res)=>{
      console.log(res.data);
    }
  )
  getRolesPageHandler()
}

const getRolesPageHandler1=async()=>{
  axios.get('http://localhost:8989/roles/page?pageNum=1&pageSize=100')
  .then((res)=>{
    console.log(res.data.data.list);
    roles.value=res.data.data.list
  })
}

const postRolesHandler1=async()=>{
  const newRole={
    name:'十谷风',
    code:'113',
    sort:44,
    status:1,
    dataScope:1
  }
  axios.post('http://localhost:8989/roles',JSON.stringify(newRole))
  .then((res)=>{
    console.log(res.data);

  })
}
</script>

<style scoped lang='scss'>
.box {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  span {
    margin: 10px;
    padding: 10px;
    border-radius: 10px;
    border: 2px solid #409eff;
    background-color: #40e2ff;
  }
}
</style>
